<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>期末项目练习</title>
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
	<link rel="stylesheet" href="index.css">
	<style type="text/css">
		.remove{
		  font-size: 20px;
		  margin-top: 6px;
		}
		.list-shu{
		  font-size: 20px;
		  height: 15px;
		}
		.list-length{
		  margin-right: 10px;
		}
	
		.list-length::after{
		  content:"|";
		  margin:auto 10px;
		}
		.item{
		  font-weight: bold;
		  font-size: 20px;
	
		}
		.timer{
		  margin-right: 30px;
		  margin-top: 15px;
		}
		#comemntPanel{
			font-size: 28px;
			margin-top:30px;
		}
		
	
	</style>

</head>

<body>



	
	<header>
		<div class="top-bar hidden-xs ">
			<!-- 第一部分 -->
			<div class="container hidden-xs">
				<div class="row ">
					<!-- row下的第1个内容 -->
					<div class="top-bar-1 col-md-3 col-lg-3 col-sm-3 ">
						<div class="dropdown" data-toggle="dropdown">
							<a href="#" class="text-muter btn ">
								<span class="glyphicon glyphicon-modal-window"></span>
								<span>关注微信号<span class="caret"></span></span>
							</a>
						</div>
						<div class="dropdown-menu text-center">
							<!-- <a href="#" >这是一个下拉链接</a> -->
							<img src="images/二维码.png" alt="2.jpg" class="reservation " width="100"
								style="margin-left:25px">
						</div>
					</div>

					<!-- row下的第2个内容 -->
					<div class="top-bar-2 col-md-3 col-lg-2 col-sm-3">
						<i class="glyphicon glyphicon-earphone"></i>
						<span class="text-muter">联系电话：8888</span>
					</div>

					<!-- row下的第3个内容 -->
					<div class="top-bar-3 col-md-3 col-lg-3 col-sm-3 text-center">
						<a href="#" class="text-muted btn top-a-3">旅游社合作</a>
						<a href="" class="text-muted btn top-a-3">景点介绍</a>
					</div>

					<!-- row下的第4个内容 -->
					<div class=" top-bar-3 col-md-3 col-lg-4 col-sm-3">
						<a href="#" class="btn btn-sm btn-regist text-muter">免费注册</a>
						<a href="#" class="btn btn-login text-muter" style="width:33.0%">登录</a>

						<a href="#" class="btn btn-md btn-search" id="search"><span class="glyphicon glyphicon-search"
								style="font-size: 19px;"></span>
						</a>

					</div>
				</div>

			</div>
		</div>

		<div class="top-bar " id="searchKuang" style="display: none;">
			
			<div class="container ">
				<div class="row ">
					<div class="col-lg-6 col-md-6 col-lg-6 col-sm-6 ">
					
						<div class="container search" >
							<div class="search-input">
								<div class="input-group">
									<input type="text" class="form-control" id="txtKeyword" placeholder="输入关键字："
										value="">
									<span class="input-group-btn" >
										<button class="btn btn-default" id="btnSearch" type="button" style="margin-top:-5px">
											<span class="glyphicon glyphicon-search"></span>
										</button>
									</span>
								</div>
							</div>
						</div>


					</div>
				</div>
			</div>
		</div>



	</header>


	<!-- 导航图 -->
	<img src="images/top_banner.jpg" alt="" width="100%"">



	<!-- 第二部分  汉堡按钮 -->
<nav class=" navbar navbar-default container" role="navigation">

	<div class="navbar-header">
		<a class="navbar-brand" href="#"><img style="width: 120px;margin-top: -20px;" src="images/tongcheng-logo.png">
		</a>

		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"
			aria-expanded="false">
			<span class="sr-only" collapsed" data-toggle="collapse">汉堡按钮</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>

	</div>

	<div class="collapse navbar-collapse" id="navbar-collapse">
		<ul class="nav navbar-nav nav-new3">
			<li class="active"><a href="##">热门景点</a></li>
			<li><a href="##">旅游攻略</a></li>
			<li><a href="##">景区旅游</a></li>
			<li><a href="##">关于我们</a></li>
		</ul>

		<ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
			<li class="geRenZhongXin">{{timer |  nowtime}}</li>
		</ul>
	</div>
	</nav>



	<!-- 第三部分  轮播图 -->
	<section id="carousel">

		<div class="carousel slide" id="lunbo">

			<!-- 圆点 -->
			<ol class="carousel-indicators">
				<li data-target="#lunbo" data-slide-to="0" class="active"> </li>
				<li data-target="#lunbo" data-slide-to="1"></li>
				<li data-target="#lunbo" data-slide-to="2"></li>
			</ol>

			<!-- 图片 -->
			<div class="carousel-inner">
				<div class="item active" data-sm-img='images/ban1_640_340.jpg'
					data-lg-img='images/ban1_2000_400.jpg '>
				</div>

				<div class="item " data-sm-img='images/ban1_640_340.jpg' data-lg-img='images/ban1_2000_400.jpg '>
				</div>

				<div class="item" data-sm-img='images/ban1_640_340.jpg' data-lg-img='images/ban1_2000_400.jpg '>
				</div>
			</div>

			<!-- 上下张按钮 -->
			<a class="left carousel-control" href="#lunbo" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>

			<a href="#lunbo" class="right carousel-control" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>


		</div>
	</section>
	<!-- /轮播图 -->

	
	<!-- 留言板 -->
	
	<div class="container" id="comemntPanel">
		<ul class="list-group" >
	
	<!-- 表单头部 -->
		<a class="list-group-item list-group-item-success" href="#">
			<h2 class="list-group-heading ">反馈留言</h2>
			<p class="list-group-item-text">将你的反馈留言下来，我们将对充分接纳此建议，努力做得更好</p>
		<br>
	
		<!-- 输入框 -->
		<div class="input-group input-group-lg">
			<span class="input-group-addon">内容</span>
			<!-- <input type="text" class="form-control" placeholder="请输入你的记事内容" 
			v-model="inputVal" @keyup.enter="add"> -->
			
			<textarea  id="input" class="form-control" rows="3" required="required" v-model="inputVal" @keyup.enter="add" style="width: 100%;height: 225px;" placeholder="请输入你的留言内容"></textarea>
			
			<span class="input-group-addon" @click="add">确认</span>
		</div>
		</a>
	
	
	<!-- 留言内容 -->
		<li class="list-group-item" v-for="(item,index) in list">
			<p>
			<b class="list-length" >{{index+1}}</b>
			<b class="item">{{item}} </b>
	
			<a href="#" @click="remove">
				<span class="glyphicon glyphicon-remove pull-right remove"></span>
			</a>
			<b class="pull-right timer" style="color:red">{{ timer | timeFilter }} </b>
			</p>
		</li>
	
	<!-- 表单脚部 -->
		<i class="list-group-item list-group-item-danger">
			<p class="list-group-footer list-shu">{{list.length}}个留言记录
				<a v-if="list.length>=1" href="#" class="pull-right" @click="clear">删除全部</a><br>
			</p>
		</i>
	
	
	
	</ul>
	
	</div>
	
 


<!-- /留言板 -->
		
		
<br>
	<!-- 脚部 -->

	<footer>
		<di#comemntPanel">
			<div class="footer-left">
				<p>Copyrights © 2016 Bootstrap 响应式餐饮网站 | 版权所有</p>
			</div>
			<div class="footer-right">
				<ul>
					<li>
						<a href="#" class="btn"><i class="glyphicon glyphicon-phone-alt"></i>联系我们</a>
					</li>
					<li>
						<a href="#" class="btn"><i class="glyphicon glyphicon-map-marker"></i>联系地址</a>
					</li>
					<li>
						<a href="comment.html" class="btn"><i class="glyphicon glyphicon-question-sign"></i>反馈咨询</a>
					</li>
				</ul>
			</div>
		</div>

	</footer>
	
	





	


	<script src="vue.js"></script>
	<script src="lib/jquery/jquery-1.11.0.min.js"></script>
	<script src="lib/lib/js/bootstrap.min.js"></script>
	<script src="index.js"></script>

	<script type="text/javascript">

		// 创建一个全局的过滤器,进行时间的格式化
		Vue.filter('timeFilter',function(dataStr,pattern=""){
        var dt = new Date()

        var y = dt.getFullYear()
        var m = dt.getMonth()+1
        var d = dt.getDate()

        if(pattern.toLowerCase() === 'yyyy--mm--dd'){
           return `${y}-${m}-${d}`
        }else{
          var hh = dt.getHours()
          var mm = dt.getMinutes()
          var ss = dt.getSeconds()
          return `${y}-${m}-${d}  ${hh}:${mm}:${ss}`
        }

    })

	var app=new Vue({
		el: "#comemntPanel",

		data:{
			list:["这里举例一个留言内容，用户写下的留言内容将会显示在这里","留言记录，时间，留言数目也会显示.也可以删除单个或者全部"],
      inputVal:"",
      timer: new Date()
		},

		methods:{

        add(){
            if(this.inputVal.length === 0){
              alert("输入内容不能为空")
            }else{
              this.list.unshift(this.inputVal)
              this.inputVal=""//输入完成之后赋予空值
            }
            
        },

        remove(index){
            this.list.splice(index,1)//splise方法切割index,切割一个
        },

        clear(){
          this.list=[]
        }
			
		}
	})


	</script>

<script type="text/javascript">

	Vue.filter("nowtime", function (dataStr, pattern = "") {
		var time = new Date()
		var nian = time.getFullYear()
		var yue = time.getMonth() + 1
		var ri = time.getDate()
		var week = time.getDay()

		var hh = time.getHours()
		var mm = time.getMinutes()
		var ss = time.getSeconds()

		// 将星期几的阿拉伯数字转换为中文
		switch (week) {
			case (1): week = "一"; break;
			case (2): week = "二"; break;
			case (3): week = "三"; break;
			case (4): week = "四"; break;
			case (5): week = "五"; break;
			case (6): week = "六"; break;
			case (0): week = "日"; break;//没有7，星期日的代号为 0，在西方，0（星期日）为一周的开始
		}
		return `${nian}年${yue}月${ri}日   周${week} --- ${hh}:${mm}:${ss}`
	})

	var app = new Vue({
		el: "#navbar-collapse",
		data: {
			timer: ""
		}
	})

</script>



</body>

</html>